<template>
  <div>
    <page-list :x-uri="uri" :custom-components="custom" :doactions="doactions">
      <!-- 自定义tab -->
      <template v-slot:page-tabs>
        <tabs />
      </template>
      <!-- 页面操作按钮 -->
      <template v-slot:page-button>
        <el-button v-auth="'mall.product.list.create'" size="mini" type="primary" @click="create">新建商品</el-button>
      </template>
      <!-- 多选操作 -->
      <template v-slot:table-button="scope">
        <el-button v-auth="'mall.product.list.edit'" size="mini" @click="disable(scope)">下架</el-button>
        <el-button v-auth="'mall.product.list.edit'" size="mini" @click="enable(scope)">上架</el-button>
        <el-button v-auth="'mall.product.list.delete'" size="mini" @click="deletes(scope)">删除</el-button>
      </template>
    </page-list>
    <sort-dialog :value.sync="sortValue" :visible.sync="visible" :disable-submit="disableSubmit" @submit="onSortSubmit" />
  </div>
</template>

<script>
import PageList from '@public/template/page_list.vue';
import Recommend from './components/recommend';
import Status from './components/status';
import Cover from './components/cover.vue';
import SortDialog from '@/components/update-sort-dialog';
import Tabs from './tabs';
export default {
  components: {
    PageList,
    Tabs,
    SortDialog
  },
  inject: ['reload'],
  data() {
    return {
      uri: '/mall/admin/product/list',
      doactions: [
        { title: '排序', meta: { permission: 'mall.product.list.edit' }, callback: this.sortPopover },
        { title: '编辑', meta: { permission: 'mall.product.list.edit' }, callback: this.edit },
        { title: '删除', meta: { permission: 'mall.product.list.delete' }, callback: this.delete }
      ],
      custom: {
        is_recommend: Recommend,
        status: Status,
        cover_url: Cover
      },
      itemId: 0,
      visible: false,
      disableSubmit: false,
      sortValue: 1 // 排序值
    };
  },
  methods: {
    create: function() {
      this.$router.push({ path: '/mall/product/create' });
    },
    edit: function({ row }) {
      this.$router.push({ path: '/mall/product/' + row.id + '/edit' });
    },
    delete: function({ row }) {
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/mall/admin/product/' + row.id,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 批量禁用
    disable: function({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要下架的商品');
        return false;
      }
      this.$box
        .confirm('确认下架吗')
        .then(() => {
          this.$http.put(
            '/mall/admin/product/disables',
            {
              ids: ids
            },
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 批量上架
    enable: function({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要上架的商品');
        return false;
      }
      this.$box
          .confirm('确认上架吗')
          .then(() => {
            this.$http.put(
                '/mall/admin/product/enables',
                {
                  ids: ids
                },
                response => {
                  this.$message.success(response.msg, _ => {
                    this.reload();
                  });
                },
                error => {
                  this.$message.error(error.msg);
                }
            );
          })
          .catch(() => {});
    },
    // 批量删除
    deletes: function({ rows }) {
      var ids = rows.map(row => row.id);
      if (ids.length === 0) {
        this.$message.warning('请选择要删除的商品');
        return false;
      }
      ids = ids.join(',');
      this.$box
        .confirm('确认删除吗')
        .then(() => {
          this.$http.delete(
            '/mall/admin/product/deletes/' + ids,
            {},
            response => {
              this.$message.success(response.msg, _ => {
                this.reload();
              });
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 排序弹出层
    sortPopover({ row }) {
      this.visible = true;
      this.itemId = row.id;
      this.sortValue = row.best_sort;
    },
    // 保存
    onSortSubmit() {
      this.disableSubmit = true;
      this.$http.put(
        '/mall/admin/product/' + this.itemId + '/edit/best_sort',
        {
          best_sort: this.sortValue
        },
        ({ msg }) => {
          this.$message.success(msg);
          this.disableSubmit = false;
          this.visible = false;
          this.reload();
        },
        ({ msg }) => {
          this.$message.error(msg);
          this.disableSubmit = false;
        },
        false
      );
    }
  }
};
</script>
